<template>
	<view class="music-detail">
		<!-- <view class="fixbg" :style="{ 'background-image': 'url(' + playList.coverImgUrl + ')' }"></view> -->
		<view class="fixbg" v-if="songs.al" :style="{ 'background-image': 'url(' + songs.al.picUrl + ')' }"></view>
		<music-head :title="songs.name + ((songs.ar && songs.ar[0]) ? '- ' + songs.ar[0].name : '')" color="white"></music-head>
		<view class="scroll-container" v-show="!isLoading">
      <scroll-view scroll-y="true">
				<view class="detail-play" @tap="handleToPlay">
					<image class="img-item" :class="{ 'play-run': isPlayRotate}" v-if="songs.al" :src="songs.al.picUrl" mode="aspectFill"></image>
					<image class="btn-play" src="/static/images/icon-play.png" v-if="!isPlayRotate"></image>
					<view></view>
				</view>
				<view class="detail-lyric">
					<view class="detail-lyric-wrap" :style="{ transform: 'translateY(' + - (lyricIndex - 1) * 82 + 'rpx)' }">
						<!-- <view class="detail-lyric-item" :class="[lyricIndex === 0 ? 'active' : '']">{{ songs.name }} {{ songs.ar && songs.ar[0] ? '- ' + songs.ar[0].name : '' }}</view> -->
						<view class="detail-lyric-item" :class="{ 'active': lyricIndex === index}" v-for="(item, index) in songLyric" :key="index">{{item.lyric}}</view>
					</view>
				</view>
				<view class="detail-like">
					<view class="detail-like-head">喜欢这首歌的人也听</view>
					<!-- <view class="detail-like-item">
						<view class="detail-like-img">
							<image src="/static/images/mlogo.png"></image>
						</view>
						<view class="detail-like-song truncate">
							<view class="truncate">与我无关</view>
							<view class="truncate">
								<image src="/static/images/dujia.png"></image>
								<image src="/static/images/sq.png"></image>
								<text class="truncate">阿冗 - 与我无关 </text>
							</view>
						</view>
						<text class="iconfont icon-playCircle"></text>
					</view>  -->
					<view class="detail-like-item" v-for="item in songSimi" :key="item.id" @tap="handleToSimi(item.id)">
						<view class="detail-like-img">
							<image v-if="item.album" :src="item.album.picUrl" mode="aspectFill"></image>
						</view>
						<view class="detail-like-song truncate">
							<view class="truncate">{{item.name}}</view>
							<view class="truncate">
								<image v-if="item.privilege && item.privilege.flag > 60 && item.privilege.flag < 70" src="/static/images/dujia.png"></image>
								<image v-if="item.privilege && item.privilege.maxbr === 999000 " src="/static/images/sq.png"></image>
								<text class="truncate">{{item.album && item.album.artists[0] && item.album.artists[0].name ? item.album.artists[0].name : ''}} - {{item.name}} </text>
							</view>
						</view>
						<text class="iconfont icon-playCircle"></text>
					</view>
				</view>
				<view class="detail-comment">
					<view class="detail-comment-head">精彩评论</view>
					<!-- <view class="detail-comment-item">
						<view class="detail-comment-img">
							<image src="/static/images/mlogo.png"></image>
						</view>
						<view class="detail-comment-content">
							<view class="detail-comment-title">
								<view class="detail-comment-name">
									<view>你就是个超级大宝藏</view>
									<view>22年01月12日</view>
								</view>
								<view class="detail-comment-like">
									<text>12</text>
									<text class="iconfont icon-zan"></text>
								</view>
							</view>
							<view class="detail-comment-text">加油</view>
						</view>
					</view> -->
					<view class="detail-comment-item" v-for="item in songHotComment" :key="item.commentId">
						<view class="detail-comment-img">
							<image v-if="item.user" :src="item.user.avatarUrl"></image>
						</view>
						<view class="detail-comment-content">
							<view class="detail-comment-title">
								<view class="detail-comment-name">
									<view>{{item.user && item.user.nickname}}</view>
									<view>{{item.time | formatTime}}</view>
								</view>
								<view class="detail-comment-like">
									<text>{{item.likedCount | formatCount}}</text>
									<text class="iconfont icon-zan-copy" v-if="item.liked"></text>
									<text class="iconfont icon-zan" v-else="item.liked"></text>
								</view>
							</view>
							<view class="detail-comment-text">{{item.content}}</view>
						</view>
					</view>
				</view>
				<view class="detail-comment">
					<view class="detail-comment-head">最新评论</view>
					<view class="detail-comment-item" v-for="item in songComment" :key="item.commentId">
						<view class="detail-comment-img">
							<image v-if="item.user" :src="item.user.avatarUrl"></image>
						</view>
						<view class="detail-comment-content">
							<view class="detail-comment-title">
								<view class="detail-comment-name">
									<view>{{item.user && item.user.nickname}}</view>
									<view>{{item.timeStr}}</view>
								</view>
								<view class="detail-comment-like">
									<text>{{item.likedCount | formatCount}}</text>
									<text class="iconfont icon-zan-copy" v-if="item.liked"></text>
									<text class="iconfont icon-zan" v-else="item.liked"></text>
								</view>
							</view>
							<view class="detail-comment-text">
								<text class="" v-if="item.beReplied[0] && item.beReplied[0].user">回复 <text class="replay-mark"> {{item.beReplied[0].user && item.beReplied[0].user.nickname}} </text>： </text>
								{{item.content}}
							</view>
							<view v-if="item.beReplied.length">
								<view class="beReplied">
									<view class="detail-comment-title">
										<view class="detail-comment-name">
											<text>{{item.beReplied[0].user && item.beReplied[0].user.nickname}}：</text><text class="detail-comment-text">{{item.beReplied[0].content}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import MusicHead from '../../components/musichead/musichead';
  import { songDetail, songSimi, songComment, songLyric, songUrl } from '../../common/api.js'
 export default {
	 components: { MusicHead },
		data() {
			return {
				isLoading: true,
				songs: {},
				privileges: [],
				songSimi: [],
				songComment: [],
				songHotComment: [],
				songLyric: '',
				lyricIndex: 0,
				songUrl: [],
				isPlayRotate: true,
				bgAudioManager: null,
				timer: null
			}
		},
		methods: {
			getMusic(songId) {
				this.lyricIndex = 0 // 自动播放下一曲的时候，歌词位置

				this.$store.commit('NEXT_ID', songId)

				uni.showLoading({
					title: '加载中...'
				});
				this.isLoading = true
				Promise.all([ songDetail(songId), songSimi(songId), songComment(songId), songLyric(songId), songUrl(songId) ]).then(res => {

					if(res[0].code === 200) {
						this.songs = res[0].songs[0]
						// this.privileges = res.privileges
					}
					if(res[1].code === 200) {
						this.songSimi = res[1].songs					
					}
					if(res[2].code === 200) {
						this.songHotComment = res[2].hotComments
						this.songComment = res[2].comments
					}
					if(res[3].code === 200) {
						let lyric = res[3].lrc.lyric
						let re = /\[([^\]]+)\]([^\[]+)/g;
						let result = []
					  lyric.replace(re, ($0, $1, $2) => {
							result.push({ "time": this.formatTimeToSec($1), "lyric": $2 })
						})
						this.songLyric = result
					}
					if(res[4].code === 200) {
						this.songUrl = res[4].data[0]

						// #ifndef H5
						if(!this.bgAudioManager) {
							this.bgAudioManager = uni.getBackgroundAudioManager()
						}
						// #endif

						// #ifdef H5
						if(!this.bgAudioManager) {
							this.bgAudioManager = uni.createInnerAudioContext();
							// this.bgAudioManager.autoplay = true; H5端不支持自动播放
						}
						this.isPlayRotate = false
						// #endif

						this.bgAudioManager.title = this.songs.name;
						// this.bgAudioManager.singer = this.songs.ar[0].name;
						this.bgAudioManager.src = this.songUrl.url; // 注意url必须存在

						this.listenLyricIndex()
						this.bgAudioManager.onPlay(() => {
							this.isPlayRotate = true
							this.listenLyricIndex()
						})
						this.bgAudioManager.onPause(() => {
							this.isPlayRotate = false
							this.cancelLyricIndex()
						})
						// 歌曲结束后自动播放下一曲
						this.bgAudioManager.onEnded(() => {
							if(this.$store.state.nextId) {
								this.getMusic(this.$store.state.nextId)
							}
						})
					}

					uni.hideLoading();
					this.isLoading = false
				})
			},
			formatTimeToSec(value) {
				let arr = value.split(':')
				return parseFloat(arr[0] * 60) + Number(parseFloat(arr[1]).toFixed(1))
			},
			handleToPlay() {
				if(this.bgAudioManager.paused) {
					this.isPlayRotate = true
					this.bgAudioManager.play()
				} else {
					this.isPlayRotate = false
					this.bgAudioManager.pause()
				}
			},
			// uni.getBackgroundAudioManager() 底层使用的也是定时器，速率非常快，对性能有影响
			listenLyricIndex() {
				clearInterval(this.timer)
				this.timer = setInterval(() => {

					for(var i=0;i<this.songLyric.length;i++) {

						if(this.bgAudioManager.currentTime > this.songLyric[this.songLyric.length - 1].time) {
							this.lyricIndex = this.songLyric.length - 1
							break;
						}

						if(this.bgAudioManager.currentTime > this.songLyric[i].time && this.bgAudioManager.currentTime < this.songLyric[i+1].time) {
							this.lyricIndex = i
						}
					}
				}, 500)
			},
			cancelLyricIndex() { // 清除定时器
				clearInterval(this.timer)
			},
			handleToSimi(songId) {
				this.getMusic(songId)
			}
		},
		onLoad(options) {
			this.getMusic(options.id)
		},
		onUnload() {
			this.cancelLyricIndex()
			// #ifdef H5
			this.bgAudioManager.destroy()
			// #endif
		},
		onHide() {
			this.cancelLyricIndex()
			// #ifdef H5
			this.bgAudioManager.destroy()
			// #endif
		}
	}
</script>

<style lang="less" scpoed>
.detail-play { position: relative; margin: 214rpx auto 0; width: 580rpx; height: 580rpx; background: url(~@/static/images/disc.png) no-repeat; background-size: 100%; }
.detail-play .img-item { width: 368rpx; height: 368rpx;border-radius: 50%;overflow: hidden;position: absolute; top: 0;right: 0;bottom: 0;left: 0;margin: auto; }
.detail-play .btn-play { width: 100rpx; height: 100rpx; border-radius: 50%; position: absolute; top: 0;right: 0;bottom: 0;left: 0;margin: auto; z-index: 1; }
.detail-play view { position: absolute; top: -180rpx; left: 140rpx; right: 0; margin: auto; width: 190rpx; height: 351rpx; background: url('/static/images/play.png') no-repeat center; background-size: 100%; z-index: 1; }
.detail-lyric { margin-top: 20rpx; overflow: hidden; }
.detail-lyric-wrap { font-size: 32rpx; line-height: 82rpx; height: 246rpx; text-align: center; }
.detail-lyric-item { height: 82rpx; color: #919191; }
.detail-lyric-item.active { color: white; }

.detail-like { margin: 0 30rpx; overflow: hidden; }
.detail-like-head { font-size: 34rpx; color: white; margin: 50rpx 0; }
.detail-like-item { display: flex; align-items: center; overflow: hidden; margin-bottom: 36rpx; }
.detail-like-img { width: 82rpx; height: 82rpx; border-radius: 10rpx; margin-right: 20rpx; overflow: hidden; }
.detail-like-song { flex: 1; }
.detail-like-song view:nth-child(1) { font-size: 28rpx; color: white; margin-bottom: 10rpx; }
.detail-like-song view:nth-child(2) { display: flex; align-items: center; font-size: 20rpx;  color: #b8a99e; }
.detail-like-song view:nth-child(2) image { width: 53rpx; height: 32rpx; margin-right: 10rpx; flex: none; }
.detail-like-item .iconfont { font-size: 50rpx; color: #b8a99e; margin-left: 10rpx; }

.detail-comment { margin: 0 30rpx; overflow: hidden; }
.detail-comment-head { font-size: 34rpx; color: white; margin: 30rpx 0 50rpx; }
.detail-comment-item { margin-bottom: 28rpx; display: flex;}
.detail-comment-img { width: 64rpx; height: 64rpx; border-radius: 50%; margin-right: 20rpx; overflow: hidden; }
.detail-comment-content { flex: 1; border-bottom: 1px #9e9a9a solid; }
.detail-comment-item:last-child .detail-comment-content { border: none; }
.detail-comment-title { display: flex; justify-content: space-between; margin-bottom: 20rpx; }
.detail-comment-name { color: #cbcacf; width: 80%; }
.detail-comment-name view:nth-child(1) { font-size: 26rpx; }
.detail-comment-name view:nth-child(2) { font-size: 20rpx; }
.detail-comment-like { font-size: 28rpx; color: #cbcacf; }
.detail-comment-like .iconfont { margin-left: 6rpx; }
.detail-comment-like .icon-zan-copy { color: red; }
.detail-comment-text { font-size: 28rpx; line-height: 40rpx; color: white; padding-bottom: 40rpx; }

.beReplied .detail-comment-title { margin-bottom: 10rpx; }
.replay-mark { color: #507daf; }
.beReplied .detail-comment-name { width: 100%; padding: 20rpx;border: 1px solid rgba(255,255,255,.2);  margin-bottom: 20rpx;}
.beReplied .detail-comment-text { font-size: 26rpx; line-height: 30rpx; }

.detail-play .img-item { animation: 10s linear move infinite; animation-play-state: paused; }
.detail-play .play-run { animation-play-state: running; }
@keyframes move {
	from { transform: rotate(0deg) }
	to { transform: rotate(360deg) }
}

.detail-lyric-wrap { transition: .5s }
</style>
